<template>
	<view class="cardContainer">
		<view class="flex align-center">
			<view class="drop" :style="{'background-color':'#5275AB'}"></view>
			<text>考勤轨迹</text>
		</view>
		<view class="route_city">
			<view class="axle" :style="{'height':axleHeight}"></view>
			<view class="route_content">
				<block v-for="(item,index) in rData" :key="index">
					<view class="city_block">
						<view class="item flex align-center mainCity">
							<text class="date">{{item.date[0]}}</text>
							<view class="cicle"></view>
							<text class="text">{{item.city}}</text>
						</view>
						<view v-for="(rItem,rIndex) in item.date" :key="rIndex">
							<view class="item flex align-center cityItem">
								<text class="date">{{rItem}}</text>
								<view class="cicle"></view>
								<text class="text">{{item.router[rIndex]}}</text>
							</view>
						</view>
					</view>
				</block>
			</view>
			
			
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data(){
			return {
				rData:[
					{
						city: "广州",
						router:["广州市番禺区天安节能大厦2-503","广州市番禺区天安节能大厦2-503","广州市番禺区天安节能大厦2-503"],
						date:["10-07","10-07","10-07"]
					},
					{
						city: "天堂",
						router:["佛山市番禺区天安节能大厦2-503","佛山市番禺区天安节能大厦2-503"],
						date:["10-07","10-07","10-07"]
					},
					{
						city: "天堂",
						router:["佛山市番禺区天安节能大厦2-503","佛山市番禺区天安节能大厦2-503"],
						date:["10-07"]
					}
				],
				axleHeight: 0,
			}
		},
		created() {
			let itemNum = 0;
			
			this.rData.forEach(item=>{
				itemNum += item.date.length;
			})
			this.axleHeight = `${(itemNum-1)*40+this.rData.length*42.5+(this.rData.length-1)*80+20}rpx`;
			console.log(this.axleHeight)
		}
	}
</script>

<style>
	.cardContainer{
		margin-top: 10rpx;
		padding: 16rpx 30rpx;
	}
	.drop{
		width: 27rpx;
		height: 27rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}
	.route_city{
		margin-top:60rpx;
		position: relative;
	}
	.axle{
		width:1px;
		background: lightblue;
		top: 10rpx;
		margin-left: 180rpx;
		position: absolute;
		z-index: -1000 !important;
		/* 这里加的边距 */
		margin-bottom: 140rpx;
	}
	.route_content{
		position: absolute;
	}
	.city_block{
		margin-bottom: 80rpx;
	}
	.mainCity {
		margin-bottom: 10rpx;
	}
	.mainCity .date,.mainCity .text{
		color: #5275AB;
	}
	.mainCity .date{
		font-size: 30rpx;
	}
	.mainCity .text{
		font-size: 30rpx;
	}
	.mainCity .cicle{
		width: 26rpx;
		height: 26rpx;
		background-color: #5275AB;
		margin-left: 65rpx;
	}
	.cityItem{
		margin-bottom: 8rpx;
	}
	
	.cityItem .date,.cityItem .text{
		color: #9D9B9B;
	}
	.cityItem .date{		
		font-size: 26rpx;
	}
	.cityItem .text{
		font-size: 26rpx;
	}
	.cityItem .cicle{
		width: 14rpx;
		height: 14rpx;
		background-color: #9D9B9B;
		margin-left: 71rpx;
	}
	.cicle{
		border-radius: 50%;
	}
	.date{
		text-align: end;
		width: 104rpx;
		font-weight: 600;
		letter-spacing: 2px
	}
	.text{
		margin-left: 78rpx;
	}
</style>
